<template>
  <div>
    <h1>星火大模型 API 调用结果</h1>
    <button @click="fetchData">调用 API</button>
    <div v-if="response">
      <h2>API 响应:</h2>
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 定义响应数据的响应式变量
const response = ref(null);

const fetchData = async () => {
  try {
    // 使用 Axios 发起 POST 请求，指向代理服务器
    const result = await axios.post('http://localhost:3000/proxy', {
      model: 'generalv3.5',
      messages: [
        {
          role: 'user',
          content: '你好，星火大模型'
        }
      ]
    });

    // 将响应数据存储到响应式变量中
    response.value = JSON.stringify(result.data, null, 2);
  } catch (error) {
    console.error('API 请求失败:', error);
    response.value = 'API 请求失败: ' + error.message;
  }
};
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px;
  white-space: pre-wrap;
}
</style>